<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .yx{
        width: 670px;
		height: 221px;
        margin: 100px auto;
        background: url("../images/pic_bg.gif") no-repeat;
        position: relative;
    }
    .yx ul{
        list-style: none;
    }
    .yx ul li{
        position: absolute;
    }
    .yx ul li img{
        height: 100%;
        width: 100%;
    }

    .yx ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px; opacity: 0; filter:alpha(opacity=0);}
	.yx ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}
	.yx ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}
	.yx ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}
	.yx ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}
	.yx ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}
	.yx ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px; opacity: 1;filter:alpha(opacity=0);}
    .rightBtn{
			position: absolute;
			top: 151px;
			right: 20px;
			width: 40px;
			height: 40px;
			background-color: red;
		}
		.leftBtn{
			position: absolute;
			top: 151px;
			left: 20px;
			width: 40px;
			height: 40px;
			background-color: red;
		}
</style>
<body>
    <div class="yx">
        <ul>
            <li class="stateA"><img src="../images/number/0.png" alt="" /></li>
            <li class="stateB"><img src="../images/number/1.png" alt="" /></li>
            <li class="stateC"><img src="../images/number/2.png" alt="" /></li>
            <li class="stateD"><img src="../images/number/3.png" alt="" /></li>
            <li class="stateE"><img src="../images/number/4.png" alt="" /></li>
            <li class="stateF"><img src="../images/number/5.png" alt="" /></li>
            <li class="stateG"><img src="../images/number/6.png" alt="" /></li>
        </ul>
        <div class="btns">
            <a href="javascript:;" id="leftBtn" class="leftBtn"></a>
            <a href="javascript:;" id="rightBtn" class="rightBtn"></a>
        </div>
    </div>

    <script src="../运动框架/myanimate-1.1.js"></script>
    <script type="text/javascript">
        //获取图片list
        var imglist = document.getElementsByTagName("li");
        var leftbtn = document.getElementById("leftBtn");
        var rightbtn = document.getElementById("rightBtn");

        var initJson = [];
        var listname = [];

        for(var i = 0; i < imglist.length; i++)
        {
            initJson.push({
                "width" : parseInt(myfetchComputedStyle(imglist[i],"width")),
                "height" :  parseInt(myfetchComputedStyle(imglist[i],"height")),
                "left" :  parseInt(myfetchComputedStyle(imglist[i],"left")),
                "top" :  parseInt(myfetchComputedStyle(imglist[i],"top")),
                "opacity" :  parseInt(myfetchComputedStyle(imglist[i],"opacity")),
            });
            listname.push(imglist[i]);
        }

        
        rightbtn.onclick = function(){
            if(listname[1].isanimated) 
            {
                console.log(listname[1]);
                return;
            }
            for(var idx = 0;idx < imglist.length-1;idx++)
                animate(listname[idx],initJson[idx+1],1000,"BounceEaseOut");

            for(var k in initJson[idx])
            {
                listname[idx].style[k] = initJson[0][k] + "px";
            }
            listname.unshift(listname.pop());
        } 
         
        leftbtn.onclick = function(){
            if(listname[1].isanimated) 
            {
                return;
            }
            for(var idx = 0;idx < imglist.length-1;idx++)
                animate(listname[imglist.length-1-idx],initJson[imglist.length-idx-2],1000,"BounceEaseOut");

            for(var k in initJson[0])
            {
                listname[0].style[k] = initJson[idx][k] + "px";
            }
            listname.push(listname.shift());
        } 
        function myfetchComputedStyle(element,cssstyle){
        //检测是否为IE浏览器 IE不支持getComputedStyle
        if(window.getComputedStyle)
        {
            //正则表达式 检测样式名称 是否为驼峰写法
            cssstyle = cssstyle.replace(/([A-Z])/g,function(match,$1){
                return "-" + $1.toLowerCase();
            });
            return window.getComputedStyle(element)[cssstyle];
        }else{
            cssstyle = cssstyle.replace(/\-([a-z])/g,function(match,$1){
                return $1.toUpperCase();
            });
            return element.currentStyle[cssstyle];
        }
    }
    </script>
</body>
</html>